<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="slot-wrap">
				<view class="city" @click="show = true">
					<view class="city-name">{{ city }}</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="search-box">
					<u-search
						@search="
							$u.route('/pages/other/storeList/storeList', {
								key: key,
								longitude: longitude,
								latitude: latitude
							})
						"
						v-model="key"
						placeholder="请输入"
						:show-action="false"
					></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="loading" v-if="loading"><u-loading></u-loading></view>
		<block v-else>
			<u-gap></u-gap>
			<view class="store-type">
				<swiper @change="swiperChange">
					<swiper-item v-for="(item, index) in storeType" :key="index">
						<view
							class="swiper-item"
							v-for="(item1, index1) in item"
							:key="index1"
							v-if="item1.id != 86 && item1.id != 88"
							@click="
								$u.route('/pages/other/storeList/storeList', {
									title: item1.className,
									sellerClassId: item1.id,
									longitude: longitude,
									latitude: latitude
								})
							"
						>
							<view class="swiper-item-box">
								<view>
									<view class="icon"><u-image width="60" height="60" :src="imageURL + item1.icon"></u-image></view>
									<view class="title">{{ item1.className }}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots"><view v-for="(item, index) in storeType" :class="[index == swiperIndex ? 'active' : '']" :key="index"></view></view>
				<u-gap height="20"></u-gap>
			</view>
			<view class="swiper-box">
				<swiper class="" autoplay vertical circular>
					<swiper-item v-for="(item, index) in messsageList" :key="index">
						<view class="message">
							<u-image :src="appletImgUrl+'shop-message-icon.png'" width="40" height="40"></u-image>
							<view class="text">{{ item.title }}：{{ item.content }}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="list">
				<view class="title">附近商家</view>
				<u-empty margin-top="300" mode="list" :show="fail"></u-empty>
				<u-gap></u-gap>
				<!-- $u.route('/pages/other/storeDetail/storeDetail',{
					id:item.id
				}) -->
				<view
					@click="
						$u.route('/pages/other/newStoreDetail/newStoreDetail', {
							store_id: item.id
						})
					"
					class="item"
					v-for="(item, index) in storeList"
					:key="index"
				>
					<view style="width: 200rpx;"><u-lazy-load height="200" img-mode="aspectFill" border-radius="20" :image="imageURL + item.imgLogo"></u-lazy-load></view>
					<!-- <u-image border-radius="20" width="200" height="200" :src="imageURL+item.imgLogo"></u-image> -->
					<view class="info">
						<view class="name">
							<view>{{ item.merchantName }}</view>
							<view>距离{{ item.distance / 1000 }}km</view>
						</view>
						<view class="other">
							<u-rate size="20" active-color="#F39D21" :count="5" v-model="item.totalScore"></u-rate>
							<view class="number">{{ item.totalScore }}</view>
							<view class="type-text">{{ item.sellerClassName }}</view>
						</view>
						<view class="address">
							<u-icon size="24" name="map-fill" color="#AAAAAA"></u-icon>
							{{ item.merchantAddress }}
						</view>
					</view>
				</view>
				<u-loadmore v-if="!fail" :status="status" />
			</view>
			<u-gap></u-gap>
		</block>

		<u-select
			title="选择省/市"
			safe-area-inset-bottom
			@confirm="confirm"
			:default-value="defaultValue"
			v-model="show"
			:list="cityList"
			mode="mutil-column-auto"
			confirm-color="#F39D21"
		></u-select>
		<view class="safe-area-inset-bottom"></view>
		<view class="" style="height: 50px;overflow: hidden;">
			<u-tabbar
				:before-switch="tabChange"
				:show="tabBarState"
				inactive-color="#A5A4A4"
				active-color="#333333"
				icon-size="36"
				:list="tabBarList"
				mid-button
				mid-button-size="104"
				:border-top="false"
			></u-tabbar>
		</view>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
import WSCoordinate from '@/js_sdk/WSCoordinate';
import QQMapWX from '@/common/qqmap-wx-jssdk.min';
let qqmapsdk = '';
export default {
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	},
	data() {
		return {
			appletImgUrl:appletImgUrl,
			messsageList: [],
			loading: true,
			key: '',
			show: false,
			status: 'loading',
			cityList: [],
			fail: false,
			defaultValue: [0, 0],
			storeType: [],
			tabBarState: false,
			imageURL: this.imageURL,
			city: '正在定位...',
			latitude: '',
			longitude: '',
			swiperIndex: 0,
			storeList: [],
			tabBarList: [
				{
					pagePath: '/pages/tabBar/index/index',
					iconPath: '/static/index-tab.png',
					selectedIconPath: '/static/index-tabActive.png',
					text: '首页'
				},
				{
					pagePath: '/pages/tabBar/shop/shop',
					iconPath: '/static/shop-tab.png',
					selectedIconPath: '/static/shop-tabActive.png',
					text: '商户'
				},
				{
					iconPath: '/static/main-tab-bar-icon.png',
					selectedIconPath: '/static/main-tab-bar-icon.png',
					pagePath: '/pages/tabBar/newIndex/newIndex',
					midButton: true
				},
				{
					pagePath: '/pages/tabBar/cardVoucher/cardVoucher',
					iconPath: '/static/order-tab.png',
					selectedIconPath: '/static/order-tabActive.png',
					text: '卡包'
				},
				{
					pagePath: '/pages/tabBar/my/my',
					iconPath: '/static/my-tab.png',
					selectedIconPath: '/static/my-tabActive.png',
					text: '个人'
				}
			]
		};
	},
	onReady() {
		this.$nextTick(() => {
			this.tabBarState = true;
		});
	},
	onReachBottom() {
		if (this.status == 'loading' || this.status == 'nomore') return;
		this.status = 'loading';
		this.pageNo++;
		this.getStoreList(res => {
			if (res == '') {
				this.status = 'nomore';
				return;
			}
			this.storeList = this.storeList.concat(res);
			this.status = 'loadmore';
		});
	},
	onLoad() {
		this.$u
			.get('sellerstoreclass/list')
			.then(res => {
				let result = [];
				for (let i = 0; i < res.length; i += 10) {
					result.push(res.slice(i, i + 10));
				}
				this.loading = false;
				this.storeType = result;
			})
			.catch(error => {
				this.loading = false;
			});
		this.$u.get('info/laterStoreAndStartUserNotice').then(res => {
			this.messsageList = res;
		});
		qqmapsdk = new QQMapWX({
			key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
		});

		let res = uni.getStorageSync('regionList');
		let province = res.filter(item => item.level == 1);
		let city = res.filter(item => item.level == 2);
		let region = province.map(level1 => {
			return {
				label: level1.areaName,
				value: level1.id,
				parentId: level1.parentId,
				children: city
					.filter(level2 => level2.parentId == level1.id)
					.map(level2 => {
						return {
							label: level2.areaName,
							value: level2.id,
							parentId: level2.parentId
						};
					})
			};
		});
		this.cityList = region;
		const self = this;
		self.latitude = '';
		self.longitude = '';
		self.pageNo = 1;
		//#ifdef MP-WEIXIN
		uni.getLocation({
			type: 'gcj02',
			altitude: true,
			success(res) {
				let BD_Coordinate = WSCoordinate.transformFromGCJToBaidu(res.latitude, res.longitude);
				self.latitude = BD_Coordinate.latitude;
				self.longitude = BD_Coordinate.longitude;
				uni.setStorageSync('locationPermission', {
					longitude: res.longitude,
					latitude: res.latitude
				});
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: res.longitude, //经度
						latitude: res.latitude //纬度
					},
					success(mapResult) {
						if (mapResult.status == 0) {
							let { result } = mapResult,
								{ address_component } = result;
							let city = address_component.city;
							let provinceIndex = self.cityList.findIndex(item => item.label == address_component.province);
							let cityIndex = self.cityList[provinceIndex].children.findIndex(item => item.label == address_component.city);
							self.defaultValue = [provinceIndex, cityIndex];
							self.city = city;
						} else {
							self.city = '定位失败';
							uni.showToast({
								title: mapResult.message,
								icon: 'none'
							});
						}
					}
				});
				self.getStoreList(result => {
					self.status = result.length < 10 ? 'nomore' : 'loadmore';
					if (result == '') {
						self.fail = true;
						return;
					}
					self.storeList = result;
				});
			},
			fail(error) {
				self.getStoreList(result => {
					self.status = result.length < 10 ? 'nomore' : 'loadmore';
					if (result == '') {
						self.fail = true;
						return;
					}
					self.storeList = result;
				});
			}
		});
		//#endif
		//#ifdef H5
		self.city = '定位失败';
		self.getStoreList(result => {
			this.status = result.length < 10 ? 'nomore' : 'loadmore';
			if (result == '') {
				this.fail = true;
				return;
			}
			self.storeList = result;
		});
		//#endif
	},
	methods: {
		search(e) {
			console.log(e);
		},
		confirm(e) {
			this.city = e[1].label;
			this.areaId = e[1].value;
			this.pageNo = 1;
			this.status = 'loading';
			this.storeList = [];
			this.fail = false;
			let provinceIndex = this.cityList.findIndex(item => item.label == e[0].label);
			let cityIndex = this.cityList[provinceIndex].children.findIndex(item => item.label == e[1].label);
			this.defaultValue = [provinceIndex, cityIndex];
			this.getStoreList(result => {
				this.status = result.length < 10 ? 'nomore' : 'loadmore';
				if (result == '') {
					this.fail = true;
					return;
				}
				this.storeList = result;
			});
		},
		getStoreList(callback) {
			let json = {
				pageNo: this.pageNo,
				pageSize: 10,
				latitude: this.latitude,
				longitude: this.longitude
			}
			if(this.areaId){
				json.areaId = this.areaId
			}
			this.$u
				.post('sellerstore/listXCX', json)
				.then(res => {
					if (res.list != '') {
						res.list.forEach(item => {
							let totalScore = item.totalScore.toString();
							item.totalScore = totalScore.length == 1 ? totalScore + '.0' : totalScore;
						});
					}
					callback(res.list);
				});
		},
		swiperChange({ detail: { current } }) {
			this.swiperIndex = current;
		},
		tabChange(index) {
			if (index == 3 || index == 4) {
				if (uni.getStorageSync('userInfo')) {
					return true;
				} else {
					this.$u.route('/pages/user/login/login');
					return false;
				}
			} else {
				return true;
			}
		}
	}
};
</script>

<style lang="scss">
.swiper-box {
	overflow: hidden;

	swiper {
		height: 80rpx;
	}
}

.message {
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	height: 80rpx;

	.text {
		flex: 1;
		margin-left: 13rpx;
		font-size: 24rpx;
		color: #f39d21;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.loading {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list {
	padding: 0 30rpx;

	> .title {
		font-weight: bold;
	}

	.item {
		background-color: #ffffff;
		display: flex;
		margin-bottom: 20rpx;
		border-radius: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.info {
			padding: 20rpx 20rpx;
			// flex: 1;
			width: 490rpx;

			.address {
				font-size: 24rpx;
				word-break: break-all;
				width: 100%;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				width: 100%;
				justify-content: space-between;

				view {
					&:first-child {
						// flex: 1;
						// width: 52%;
						padding-right: 30rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					&:last-child {
						// width: 48%;
						word-break: break-all;
						font-size: 24rpx;
						font-weight: normal;
						white-space: nowrap;
						color: #aaa;
					}
				}
			}

			.other {
				display: flex;
				align-items: center;
				margin-bottom: 13rpx;
				margin-top: 5rpx;
				font-size: 24rpx;

				.type-text {
					color: #aaaaaa;
				}

				.number {
					color: #f39d21;
					margin: 0 15rpx;
				}
			}
		}
	}
}

.dots {
	display: flex;
	justify-content: center;

	view {
		width: 20rpx;
		height: 6rpx;
		background-color: #eeeeee;

		&.active {
			background-color: #f39d21;
		}
	}
}

page {
	background-color: #f7f7f7;
}

.store-type {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 0 30rpx;
	overflow: hidden;

	swiper-item {
		.swiper-item {
			display: inline-block;
			// padding: 15rpx 0;
			width: 20%;
			height: 50%;
			text-align: center;

			.swiper-item-box {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.icon {
				display: flex;
				justify-content: center;
			}

			.title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 24rpx;
			}
		}
	}
}

.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	padding: 0 30rpx;

	.search-box {
		flex: 1;
	}

	.city {
		display: flex;
		align-items: center;
		margin-right: 30rpx;

		.city-name {
			margin-right: 10rpx;
		}
	}
}
</style>
